<template>
    <nav class="ml-4">
      <ul class="hidden md:flex space-x-4">
        <li>
          <RouterLink 
            to="/" 
            class="hover:text-primary-200"
            :class="{ 'text-primary-200': !currentCategory }"
          >
            首页
          </RouterLink>
        </li>
        <li 
          v-for="category in categories" 
          :key="category.id" 
          class="dropdown-menu relative"
        >
          <div 
            @click.stop="toggleDropdown(category)"
            class="flex items-center space-x-1 cursor-pointer hover:text-primary-200"
            :class="{ 'text-primary-200': currentCategory === category.id }"
          >
            <span>{{ category.category_name }}</span>
            <svg 
              xmlns="http://www.w3.org/2000/svg" 
              class="h-4 w-4 transition-transform duration-200"
              :class="{ 'rotate-180': category.showDropdown }"
              viewBox="0 0 20 20" 
              fill="currentColor"
            >
              <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
            </svg>
          </div>
          
          <!-- 下拉菜单 -->
          <div 
            v-show="category.showDropdown"
            class="absolute top-full left-0 mt-1 w-32 bg-primary-700 rounded shadow-lg py-2"
          >
            <ul>
              <li>
                <a 
                  @click.prevent="handleNavigation(category.id)"
                  href="#"
                  class="block px-4 py-2 hover:bg-primary-600 hover:text-primary-200"
                >
                  全部
                </a>
              </li>
              <li v-for="region in regions" :key="region.id">
                <a 
                  @click.prevent="handleNavigation(category.id, region.id)"
                  href="#"
                  class="block px-4 py-2 hover:bg-primary-600 hover:text-primary-200"
                >
                  {{ region.name }}
                </a>
              </li>
            </ul>
          </div>
        </li>
      </ul>
    </nav>
  </template>
  
  <script setup>
  import { ref, onMounted, computed, onUnmounted } from 'vue'
  import { useRouter, useRoute } from 'vue-router'
  import { getCategoryList } from '@/api/category'
  
  const router = useRouter()
  const route = useRoute()
  
  const categories = ref([])
  const regions = ref([
    { id: 1, name: '中国大陆'},
    { id: 2, name: '中国香港'},
    { id: 3, name: '中国台湾'},
    { id: 4, name: '美国'},
    { id: 5, name: '日本'},
    { id: 6, name: '韩国'},
    { id: 7, name: '其他'},
  ])
  
  // 当前选中的分类
  const currentCategory = computed(() => route.query.category)
  
  // 获取分类列表
  const fetchCategories = async () => {  
    try {
      const response = await getCategoryList()
      const res = response.data
      if (res.code === 200) {
        categories.value = res.data.items.map(category => ({
          ...category,
          showDropdown: false
        }))
      }
    } catch (error) {
      console.error('获取分类列表失败:', error)
    }
  }
  
  // 切换下拉菜单
  const toggleDropdown = (category) => {
    categories.value.forEach(cat => {
      if (cat.id !== category.id) {
        cat.showDropdown = false
      }
    })
    category.showDropdown = !category.showDropdown
  }
  
  // 处理导航
  const handleNavigation = (categoryId, regionId = null) => {
    const query = { category: categoryId }
    if (regionId) {
      query.region = regionId
    }
    router.push({ path: '/', query })
    closeAllDropdowns()
  }
  
  // 关闭所有下拉菜单
  const closeAllDropdowns = () => {
    categories.value.forEach(category => {
      category.showDropdown = false
    })
  }
  
  onMounted(() => {
    fetchCategories()
    document.addEventListener('click', (e) => {
      if (!e.target.closest('.dropdown-menu')) {
        closeAllDropdowns()
      }
    })
  })
  
  onUnmounted(() => {
    document.removeEventListener('click', closeAllDropdowns)
  })
  </script>
  
  <style scoped>
  .dropdown-menu {
    position: relative;
  }
  
  .dropdown-menu > div > svg {
    transition: transform 0.2s ease-in-out;
  }
  </style> 